<template>
  <div class="rank_main_item" v-if="musicList != null && rankId != null" @click="handleRankItem">
    <div class="rank_title">
      <span>{{ musicList.name }}</span>
    </div>
    <div class="rank_content">
      <div class="rank_img">
        <img :src="musicList.coverImgUrl" />
      </div>
      <div class="rank_content_table">
        <b-table stripe stripe-background-color="#f9f9f9">
          <b-table-body slot="body" class="table-body">
            <b-table-tr split-color="var(--border)" v-for="(item, index) in songList" :key="index">
              <b-table-td width="50px" :class="[index <= 2 ? 'active' : '']"> {{ '0' + (index + 1) }} </b-table-td>
              <b-table-td>{{ item.name }}</b-table-td>
              <b-table-td class="table-list-body-artist">{{ item.artist }}</b-table-td>
            </b-table-tr>
          </b-table-body>
        </b-table>
      </div>
    </div>
  </div>
</template>

<script>
import { SongDetail, _getMusicDetail, _getSongsDetail } from '../../../network/detail'
export default {
  name: 'RanklistItem',
  data() {
    return {
      musicList: null,
      songList: []
    }
  },
  props: {
    rankId: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    _getMusicDetail(this.rankId).then((res) => {
      this.musicList = res.data.playlist
      /** 遍历查询歌单所有歌曲详情 */
      this.musicList.trackIds.slice(0, 8).forEach((item) => {
        _getSongsDetail(item.id).then((res) => {
          const song = new SongDetail(res.data.songs[0])
          this.songList.push(song)
        })
      })
    })
  },
  methods: {
    handleRankItem() {
      this.$router.push('/musiclistdetail/' + this.rankId + '/' + new Date().getTime())
    }
  }
}
</script>

<style lang="less" scoped>
.rank_main_item {
  width: 30%;
  padding: 20px 0;
  cursor: pointer;
  .rank_title {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #000;
    font-weight: 600;
    height: 50px;
  }
  .rank_content {
    width: 100%;
    font-size: 14px;
    .rank_img {
      width: 100%;
      img {
        width: 100%;
        height: 120px;
      }
    }
  }
}
.active {
  color: var(--main-color);
}
</style>
